<template>
    <view class="order_list">
        <view class="m_card" v-for="item in orderList" :key="item._id">
            <view class="header flex-between">
                <view class="flex-start header_item">
                    <text class="label">{{ item.orderType === 0 ? "自提" : "外卖" }}</text>
                    <text class="name">{{ merchantInfo?.name }}</text>
                </view>
                <view class="status">{{ statusText(item.OrderStatus) }}</view>
            </view>
            <view class="main flex-between">
                <scroll-view :scroll-x="true" class="goods_list">
                    <view class="goods_item" v-for="good in item.goods" :key="good.goodsId">
                        <image class="goods_image" mode="aspectFit" :src="good.image" />
                        <div class="name sle">{{ good.name }}</div>
                    </view>
                </scroll-view>
                <view class="good_info"><text class="total_price">{{ item.payPrice }}</text><text class="total_quantity">共{{
                    item.goods.length }}件</text></view>
            </view>
            <view class="option_btn flex-end">
                <button @tap="goEval">立即评价</button>
            </view>
        </view>
        <Tips v-if="nodata">暂无订单</Tips>
    </view>
</template>
<script setup lang="ts">
import request from '@/api/request';
import Tips from "@/component/tipes.vue"
import type { OrderList } from '@/types';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
const orderList = ref<OrderList["list"]>([]);
const page = ref(1);
const finish = ref(false);
const nodata = ref(false)
const merchantInfo = uni.getStorageSync("merchant_info");
onShow(async () => {
    page.value = 1;
    orderList.value = [];
    await loadData();
    orderList.value.length === 0 && (nodata.value = true)
});
const loadData = async () => {
    if (!finish.value) {
        request<OrderList>("/getOrderList", { page: page.value }).then(res => {
            page.value++;
            orderList.value = [...orderList.value, ...res.data.list];
            finish.value = orderList.value.length >= res.data.total;
        });
    }
};
const statusText = (status: number) => {
    switch (status) {
        case 0:
            return "待支付";
        case 1:
            return "带备餐";
        case 2:
            return "正在备餐";
        case 3:
            return "配送中";
        case 4:
            return "待取餐";
        case 5:
            return "已完成";
        default:
            return "未知";
    }
};
const goEval = () => {
    uni.navigateTo({ url: "/pages/orderEval/index" });
};
onReachBottom(() => {
    console.log("获取更多数据");
    loadData();
});
</script>

<style lang="scss">
page {
    background: #f6f6f6 !important;
    padding-bottom: 20rpx;
}

.order_list {
    .m_card {
        padding: 30rpx;
    }

    .header {
        font-weight: bold;

        .header_item {
            .label {
                border: 1rpx solid #214bd5;
                padding: 2rpx 4rpx;
                font-size: 24rpx;
                color: #214bd5;
                margin-right: 6rpx;
                border-radius: 8rpx;
            }

            .name {
                font-size: 32rpx;
                font-weight: bold;
            }
        }

        .status {
            font-size: 24rpx;
            color: #214bd5;
        }
    }

    .main {
        margin: 20rpx 0;

        .goods_list {
            max-width: calc(100% - 200rpx);

            .goods_item {
                width: calc(25% - 15rpx);
                margin-right: 20rpx;
                display: inline-block;

                &:last-child {
                    margin-right: 0;
                }

                .goods_image {
                    width: 100%;
                    height: 100rpx;
                }

                .name {
                    color: #666;
                    font-size: 24rpx;
                    margin-top: 10rpx;
                }
            }
        }

        .good_info {
            .total_price {
                font-weight: bold;
            }

            .total_quantity {
                color: #666;
                font-size: 24rpx;
                margin-top: 10rpx;
            }
        }
    }

    .option_btn {
        button {
            border: 1px solid #666;
            padding: 10rpx 20rpx;
            font-size: 28rpx;
            background: none;
        }
    }
}
</style>